<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟支付页</title>
</head>
<body>
    <form action="./javascript2.html" method="get" enctype="application/x-www-form-urlencoded">
        <span style="font-size: 20px; margin: 10px;">支付</span>
        <div>
            <input style="display: none;" type="radio" name="a" id="a1" onclick="getRadioBoxValue()" value="100.00" checked><label for="a1">￥100.00</label> 
            <br>
            <input style="display: none;" type="radio" name="a" id="a2" onclick="getRadioBoxValue()" value="200.00"><label for="a2">￥200.00</label>
            <br>
            <input style="display: none;" type="radio" name="a" id="a3" onclick="getRadioBoxValue()" value="300.00"><label for="a3">￥300.00</label>
            <br>
            <input style="display: none;" type="radio" name="a" id="a4" onclick="getRadioBoxValue()" value="400.00"><label for="a4">￥400.00</label>
            <br>
            <div class="zdybox">
                <span>自定义金额</span>
                <br>
                ￥<input type="text" name="" id="zdy" placeholder="">
            </div>
            <br>
        </div>
        
        <input class="payBtn" type="submit" name="" id="" value="支付">
    </form>

    <style>
        form{
            border: 1px solid rgba(124, 124, 124, 0.566);
            width: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;

        }
        form label{
            border: 1px solid #747474;
            border-radius: 3px;
            display: inline-block;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin: 5px 0;
            cursor: pointer;
        }
        form .payBtn{
            width: 120px;
            height: 35px;
            background: #09bb07;
            border: none;
            border-radius: 3px;
            color: #fff;
            margin-bottom: 10px;

        }
        form span{
            font-size: 12px;
            line-height: 30px;
            color: #6a6a6a;
        }
        .zdybox{/*
            border: 1px solid #747474;*/
        }
        #zdy{
            font-size: 20px;
            border: none;
            outline: none;
        }
    </style>
    <script>
        function  getRadioBoxValue(){
            document.querySelector("#zdy").value="";
            var obj = document.getElementsByName("a"); //这个是以标签的name来取控件 
            
            var label = document.getElementsByTagName("label"); //这个是以标签的name来取控件 
            for(i=0; i<label.length;i++){
                label[i].style.background="#fff"
                label[i].style.color="#000"
            }
            
            for(i=0; i<obj.length;i++)  {
                
                if(obj[i].checked)  {
                    console.log(obj[i].value)
                    label[i].style.background="#ff4e4e"
                    label[i].style.color="#fff"
                    document.querySelector("[type=submit]").value="支付 ￥"+obj[i].value
                    return  obj[i].value;
                }
                
            }
            return "undefined";
        }

        /*
        document.querySelector("#zdy").onchange = function(){
            console.log(document.querySelector("#zdy").value);
        }*/
        document.querySelector("#zdy").oninput = function(){
            var label = document.getElementsByTagName("label"); //这个是以标签的name来取控件 
            for(i=0; i<label.length;i++){
                label[i].style.background="#fff"
                label[i].style.color="#000"
            }
            console.log(document.querySelector("#zdy").value);
            if (document.querySelector("#zdy").value.indexOf(".") != -1) {
                document.querySelector("[type=submit]").value="支付 ￥"+document.querySelector("#zdy").value
            } else {
                //var pay = typeof Number(document.querySelector("#zdy").value)
            var pay = parseInt(document.querySelector("#zdy").value, 10)
            console.log(typeof Number(pay))
            console.log(parseInt(document.querySelector("#zdy").value, 10).toFixed(2))
            document.querySelector("[type=submit]").value="支付 ￥"+pay.toFixed(2)
            }
            
        }
        /*
        document.querySelector("#zdy").addEventListener("change",function(){
            console.log(document.querySelector("#zdy").value);
        })*/
    </script>
</body>
</html>
